<template>
	<view class="content">
		<view :style="{background: `url(${images.indexBg})`, backgroundRepeat: 'no-repeat', paddingBottom: '200rpx'}">
			<u-navbar :is-back="false" :background="background" :border-bottom="false" :is-fixed="false">
				<view class="slot-wrap" style="color: #fff; font-size: 32rpx;width: 100vw;">
					<view class="slot-wrap" style="color: #fff; font-size: 32rpx;width: 100vw;">
						<view style="display: flex;justify-content: center;width: 100%;">
							个人中心
						</view>
					</view>
				</view>
			</u-navbar>
			<view class="user-item" >
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<u-avatar :src="user.avatar" size="124"></u-avatar>
					<u-image style="margin-top: -30rpx;margin-left: -16rpx;" v-if="user.level == 1" width="129rpx" height="48rpx" :src="images.levelPt" mode="widthFix"></u-image>
					<u-image style="margin-top: -30rpx;margin-left: -16rpx;" v-if="user.level == 2" width="129rpx" height="48rpx" :src="images.levelJz" mode="widthFix"></u-image>
					<u-image style="margin-top: -30rpx;margin-left: -16rpx;" v-if="user.level == 3" width="129rpx" height="48rpx" :src="images.levelCy" mode="widthFix"></u-image>
					<u-image style="margin-top: -30rpx;margin-left: -16rpx;" v-if="user.level == 4" width="129rpx" height="48rpx" :src="images.levelHh" mode="widthFix"></u-image>
				</view>
				<view style="display: flex;flex-direction: column;margin-left: 20rpx;flex: 1;height: 140rpx;justify-content: space-between;">
					<text style="font-size: 34rpx;margin-right: 10rpx;color: #fff;">{{user.nick_name}}</text>
					<text style="color: #fff;font-size: 26rpx;">ID:{{user.id || ''}}</text>
					
					<view 
						style="display: flex;flex-direction: row;"
						@click="copy(user.recommend.wx_number)" 
						v-if="user.recommend && user.recommend.wx_number != ''">
						<view style="font-size: 26rpx;color: #fff;">推荐人：</view>
						<view style="width: 400rpx; height: 40rpx; overflow: hidden;font-size: 26rpx;color: #fff;">{{user.recommend.nick_name}} (微:{{user.recommend.wx_number}})</view>
					</view>
					<view 
						style="display: flex;flex-direction: row;"
						v-if="user.recommend && user.recommend.wx_number == ''" >
						<view style="font-size: 26rpx;color: #fff;">推荐人：</view>
						<view style="font-size: 26rpx;color: #fff;">{{user.recommend.nick_name}} (微:未填写)</view>
					</view>
					<view 
						style="display: flex;flex-direction: row;"
						v-if="!user.recommend">
						<view style="font-size: 26rpx;color: #fff;">推荐人：</view>
						<view style="width: 400rpx; height: 40rpx; overflow: hidden;font-size: 26rpx;color: #fff;" @click="copy('15580892099')">平台直推 (微:15580892099)</view>
					</view>
				</view>
				<u-image @click="openPage('pages/center/setting', {user: JSON.stringify(user)})" style="align-self: flex-start;position: absolute;right: 0;top:70rpx" width="96rpx" :src="images.shezhi" mode="widthFix"></u-image>
			</view>
		</view>
		
		<view style="display: flex;justify-content: center;margin-top: -146rpx;">
			<view  :style="{background: `url(${images.kapian})`, backgroundRepeat: 'no-repeat', width: '710rpx', height: '292rpx', backgroundSize: 'cover'}">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 32rpx;">
					<view style="display: flex;flex-direction: row;align-items: baseline">
						<text style="color: #FFFFFF;font-size: 28rpx;">我的余额￥ </text>
						<text style="color: #FFFFFF;font-size: 38rpx;">{{user.balance}}</text>
					</view>
					<view @click="openPage('pages/center/withdrawal', {user: JSON.stringify(user)})" :style="{width: '176rpx', height: '56rpx', background: `url(${images.levelBg})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', color: '#6C2A09', display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: '56rpx'}">
						立即提现
					</view>
				</view>
				<view style="display: flex;justify-content: space-around;flex-direction: row;margin-top: 20rpx;align-items: center;padding: 0 20rpx;">
					<view class="my_sy_item">
						<text class="my_sy_item_title">累计收益</text>
						<text class="my_sy_item_num">{{user.income}}</text>
					</view>
					<view style="display: flex;flex-direction: row;">
						<u-line color="#fff" length="80" direction="col" ></u-line>
						<u-line color="#DF3D36" length="80" direction="col" ></u-line>
					</view>
					<view class="my_sy_item">
						<text class="my_sy_item_title">今日收益</text>
						<text class="my_sy_item_num">{{user.today_income}}</text>
					</view>
					<view style="display: flex;flex-direction: row;">
						<u-line color="#fff" length="80" direction="col" ></u-line>
						<u-line color="#DF3D36" length="80" direction="col" ></u-line>
					</view>
					<view class="my_sy_item">
						<text class="my_sy_item_title">昨日收益</text>
						<text class="my_sy_item_num">{{user.yesterday_income}}</text>
					</view>
					<view style="display: flex;flex-direction: row;">
						<u-line color="#fff" length="80" direction="col" ></u-line>
						<u-line color="#DF3D36" length="80" direction="col" ></u-line>
					</view>
					<view class="my_sy_item">
						<text class="my_sy_item_title">在路上</text>
						<text class="my_sy_item_num">{{user.pre_income}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 20rpx;background-color: #FFFFFF;border-radius: 10rpx;padding: 40rpx 40rpx;">
			<view style="display: flex;justify-content: space-between;flex-direction: row;align-items: center;">
				<view class="my_order_item" @click="openPage('/pages/orders/extOrder', {current:0})">
					<u-image width="60rpx" :src="images.tuanduidindan" mode="widthFix"></u-image>
					<text class="my_order_item_title">团队订单</text>
				</view>
				<view class="my_order_item" @click="openPage('/pages/orders/extOrder', {current:1})">
					<u-image width="60rpx" :src="images.zailushang" mode="widthFix"></u-image>
					<text class="my_order_item_title">在路上</text>
				</view>
				<view class="my_order_item" @click="openPage('/pages/orders/extOrder', {current:2})">
					<u-image width="60rpx" :src="images.yijiesuan" mode="widthFix"></u-image>
					<text class="my_order_item_title">已结算</text>
				</view>
				<view class="my_order_item" @click="openPage('/pages/orders/extOrder', {current:3})">
					<u-image width="60rpx" :src="images.wuyongjing" mode="widthFix"></u-image>
					<text class="my_order_item_title">无佣金</text>
				</view>
			</view>
		</view>
		
		<view style="display: flex;justify-content: center;margin: 20rpx;" @click="openPage('pages/center/poster')">
			<u-image width="710rpx" :src="images.haibao" mode="widthFix"></u-image>
		</view>
		
		<view style="margin-top: 100rpx;margin: 0 20rpx; border-radius: 10rpx;overflow: hidden;margin-bottom: 40rpx;">
			<view
				style="font-size: 30rpx;background-color: #fff;color: #000;padding: 30rpx 30rpx;border-bottom: 2rpx solid #f5f5f5;">
				商城
			</view>
			<u-cell-group :border="false">
				<u-cell-item v-for="(item, index) in mall" :key="index" @click="openPage(item.page)">
					<u-icon slot="icon" size="32" custom-prefix='gewu' :name="item.icon"></u-icon>
					<!-- <u-icon slot="icon" size="32" :name="item.icon"></u-icon> -->
					<text slot="title" style="margin-left: 20rpx;">{{item.title}}</text>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<view style="margin-top: 100rpx;margin: 0 20rpx; border-radius: 10rpx;overflow: hidden;">
			<view style="font-size: 30rpx;background-color: #fff;color: #000;padding: 30rpx 30rpx;border-bottom: 2rpx solid #f5f5f5;">
				常用功能
			</view>
			<u-cell-group :border="false">
				<u-cell-item v-for="(item, index) in list" :key="index" @click="openPage(item.page)">
					<u-icon slot="icon" size="32" custom-prefix='gewu' :name="item.icon"></u-icon>
					<text slot="title" style="margin-left: 20rpx;">{{item.title}}</text>
				</u-cell-item>
				<u-button open-type="contact" :hair-line="false" :custom-style="customStyle">
					<u-cell-item style="width: 100%;">
						<u-icon slot="icon" size="32" custom-prefix='gewu' name="bianpinghuatubiaosheji-"></u-icon>
						<text slot="title" style="margin-left: 20rpx;">联系客服</text>
					</u-cell-item>
				</u-button>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	export default {
		data() {
			return {
				user: null,
				mall: [{
					icon: 'shangchengdingdan',
					title: '商城订单',
					page: 'pages/orders/orders'
				},{
					icon: 'pingtuandingdan',
					title: '拼团订单',
					page: 'pages/group/my'
				},{
					icon: 'shouhuodizhi',
					title: '收货地址',
					page: 'pages/address/address'
				}],
				list: [{
						icon: '1_tuandui-06',
						title: '我的团队',
						page: 'pages/center/team'
					},
					{
						icon: 'caiwu',
						title: '财务明细',
						page: 'pages/center/finance'
					},
					// {
					// 	icon: 'bianpinghuatubiaosheji-',
					// 	title: '联系客服',
					// 	page: 'customer'
					// },
					// {
					// 	icon: 'jiaocheng',
					// 	title: '省钱教程',
					// 	page: 'pages/project/project'
					// },
					// {
					// 	icon: 'yijian1',
					// 	title: '意见反馈'
					// },
					// {
					// 	icon: 'shezhi1',
					// 	title: '设置',
					// 	page: 'pages/setting/setting'
					// }
				],
				background: {
					// background: "url('/static/my/bg@2x.png') no-repeat",
					backgroundSize: "100%",
					width:'100vw'
				},
				customStyle:{
					padding: 0,
					border: 'none',
					height: '97rpx'
				},
				images: '',
			}
		},
		onLoad() {
			this.images = imagesUrl.my
			let that = this;
			this.$u.api.userInfoByToken({}).then(res => {
				that.user = res
				uni.setStorageSync('user_info', JSON.stringify(res))
			})
			uni.$on('updateUserInfo', function(data) {
				this.$u.api.userInfoByToken({}).then(res => {
					that.user = res
					uni.setStorageSync('user_info', JSON.stringify(res))
				})
			})
		},
		methods: {
			openPage(path, params={}) {
				if(path == 'customer'){
					uni.openCustomerServiceChat({
					  extInfo: {url: ''},
					  corpId: '',
					  success(res) {
						  
					  }
					})
				}else{
					this.$u.route({
						url: path,
						params
					})
				}
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log(1111)
						
					}
				});
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let userInfo = JSON.parse(uni.getStorageSync('user_info'))
				return {
					title: "餐前福利！外卖红包天天领，最高可得66元",
					path: '/pages/meituan/meituan?share_key=' + this.user.share_key,
					imageUrl: '../../static/share.png'
				}
		}
	}
</script>

<style lang="scss" scoped>
	body{
		background-color: #f5f5f5;
	}
	.content{
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
		height: 100vh;
	}
	.user-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 40rpx;
		padding-top: 20rpx;
		position: relative;
		// border-radius: 10rpx;
	}
	.my_order_item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.my_order_item_num{
		color: #1A1A1A;
		font-size: 32rpx;
		font-weight: 600;
	}
	.my_order_item_title{
		color: #999999;
		font-size:26rpx;
	}
	.my_sy_item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.my_sy_item_title{
		color: #FFFFFF;
		font-size:22rpx;
		margin-bottom: 20rpx;
	}
	.my_sy_item_num{
		color: #FFFFFF;
		font-size:32rpx;
	}
</style>
